<template>
  <div class="dictList">
    <el-dialog
      title="选择数据字典"
      :visible.sync="open"
      width="70%"
      :before-close="beforeClose"
    >
      <div v-loading="loading">
        <div style="display: flex; align-items: flex-start">
          <el-form
            ref="queryParamsFormRef"
            :model="queryParamsForm"
            label-width="120px"
            @submit.native.prevent
          >
            <el-form-item label="名称/编号" prop="searchValue">
              <el-input
                v-model="queryParamsForm.searchValue" @keyup.enter.native="getList"
                placeholder="请输入字典名称和编号"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-button
            type="primary"
            style="background: #2f54eb; margin-left: 20px"
            icon="el-icon-search"
            @click="getList"
            >查询</el-button
          >
          <el-button
            icon="el-icon-refresh-right"
            @click="() => handleReset('queryParamsFormRef')"
            >重置</el-button
          >
        </div>
        <div class="leftTable">
          <el-tabs v-model="activeName" @tab-click="getList">
            <el-tab-pane label="应用字典" name="1"></el-tab-pane>
            <el-tab-pane label="系统字典" name="2"></el-tab-pane>
          </el-tabs>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            size="mini"
            v-if="activeName === '1'"
          >
            <el-table-column label=" " align="center" width="60">
              <template slot-scope="scope">
                <el-radio
                  v-model="radioDict"
                  :label="scope.$index"
                  @change.native="getCurrentRowForm(scope.row)"
                  >&nbsp;</el-radio
                >
              </template>
            </el-table-column>
            <el-table-column prop="date" label="序号" width="80" align="center">
              <template slot-scope="scope">
                {{
                  (queryParamsForm.pageNum - 1) * queryParamsForm.pageSize +
                  (scope.$index + 1)
                }}
              </template>
            </el-table-column>
            <el-table-column prop="dictName" label="字典名称" align="center">
            </el-table-column>
            <el-table-column prop="dictType" label="字典编号" align="center">
            </el-table-column>
            <el-table-column prop="remark" label="字典备注" align="center">
            </el-table-column>
            <el-table-column
              prop="status"
              label="字典状态"
              align="center"
              :formatter="(row) => (row.status === '0' ? '正常' : '停用')"
            >
            </el-table-column>
          </el-table>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            size="mini"
            v-if="activeName === '2'"
          >
            <el-table-column label=" " align="center" width="60">
              <template slot-scope="scope">
                <el-radio
                  v-model="radioDict"
                  :label="scope.$index"
                  @change.native="getCurrentRowForm(scope.row)"
                  >&nbsp;</el-radio
                >
              </template>
            </el-table-column>
            <el-table-column prop="date" label="序号" width="80" align="center">
              <template slot-scope="scope">
                {{
                  (queryParamsForm.pageNum - 1) * queryParamsForm.pageSize +
                  (scope.$index + 1)
                }}
              </template>
            </el-table-column>
            <el-table-column prop="dictName" label="字典名称" align="center">
            </el-table-column>
            <el-table-column prop="dictType" label="字典编号" align="center">
            </el-table-column>
            <el-table-column prop="remark" label="字典备注" align="center">
            </el-table-column>
            <el-table-column
              prop="status"
              label="字典状态"
              align="center"
              :formatter="(row) => (row.status === '0' ? '正常' : '停用')"
            >
            </el-table-column>
          </el-table>
          <div class="pagination">
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParamsForm.pageNum"
              :limit.sync="queryParamsForm.pageSize"
              @pagination="getList"
            />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="beforeClose">取 消</el-button>
        <el-button type="primary" @click="handleDictSure(chooseDict,activeName)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { appDictTypeList } from "@/api/app/dataDict.js";
import { listType } from "@/api/system/dict/type";
export default {
  name: "HyUiDictList",
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    beforeClose: {
      type: Function,
      default: () => {},
    },
    appId: {
      type: String,
      default: "",
    },
    handleDictSure: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      radioDict: undefined,
      chooseDict: null,
      queryParamsForm: {
        pageNum: 1,
        pageSize: 10,
        searchValue: undefined,
      },
      tableData: [],
      total: 0,
      loading: false,
      activeName: "1",
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    getCurrentRowForm(key) {
      console.log(key);
      this.chooseDict = key;
    },
    async getList() {
      this.loading = true;
      let res = undefined;
      if (this.activeName === "1") {
        res = await appDictTypeList({
          ...this.queryParamsForm,
          appId: this.appId,
        });
      } else {
        res = await listType({
          ...this.queryParamsForm,
        });
      }
      if (res.code == 200) {
        this.tableData = res?.rows;
        this.total = res?.total;
      } else {
        this.loading = false;
      }
      this.loading = false;
    },
    handleReset(value) {
      this.$refs[value].resetFields();
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.dictList {
  ::v-deep .el-radio__label {
    display: none;
  }
}
</style>